import useWebAnimations from "@wellyshen/use-web-animations";
import React, { useEffect } from "react";

const color = [
  "",
  "rgb(173, 216, 230)",
  "rgb(0  128  0 / 60%)",
  "rgb(0, 128, 0)",
  "rgb(255, 165, 0)",
];
export default function MergePillar(props) {
  const { ref, animate } = useWebAnimations();
  useEffect(() => {
    animate({
      keyframes: {
        transform: `translate(${props.pos * 40}px,${props.posy}px)`,
      },
      animationOptions: { duration: 300, fill: "forwards" },
    });
  }, [props.pos, props.posy]);

  return (
    <div
      style={{
        position: "absolute",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        fontSize: "20px",
      }}
      ref={ref}
    >
      <div
        style={{
          // transform: `translate(${props.pos * 100}px,0px)`,
          height: props.height,
          width: "30px",
          // flexDirection: "row",
          display: "flex",
          alignItems: "flex-end",
          justifyContent: "center",
          // justifyContent: "center",
          // alignItems: "center",
          backgroundColor: color[props.color],
        }}
      >
        {props.number}
      </div>
    </div>
  );
}
